<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<spring:url value="/resources/styles/achievement.css" var="achievementCss" />
<link rel="stylesheet" href="${achievementCss}" />

<div id="overlay" style="display: none;">

	<div id="achievement">
		<div class="achievement-making">

			<div class="achievements" data-bind="foreach: achievements">
				<div class="achievement" data-bind="class: achievementId, css: {achieved: achieved}">
					<div class="trophy"></div>
					<div data-bind="text: achievementId"></div>
				</div>
			</div>
			
		</div>
	</div>
</div>

<spring:url value="/achievements" var="achievementUrl" />

<script>
	require([ 'domReady!', 'util/JQuery', 'util/Knockout', 'viewModel/AchievementViewModel' ], function(document, $, ko, AchievementViewModel) {

		$("#achievement").mCustomScrollbar({
			scrollButtons : {
				enable : false
			},
			advanced : {
				updateOnContentResize : true
			}
		});
		
		$('#overlay').click(function() {
			$("#overlay").fadeOut("slow");
		});

		$('#achievement').click(function(event) {
			event.stopPropagation();
		});

		$('#showAchievement').click(function() {
			
			var context = ko.contextFor(document.getElementById("achievement"));
			context.$root.achievementLoad();
			
			$("#overlay").fadeIn("slow");
			$("#achievement").center($('#wrapper'));
		});
				
		ko.applyBindings(new AchievementViewModel('${achievementUrl}'), document.getElementById("achievement"));
	});
</script>

